<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org">
<head> 
<meta http-equiv="Content-Type" content="multipart/form-data; charset=UTF-8" />
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
<title>新增用户</title>
<style type="text/css">
	.inputText{width: 430px !important;}
	.rowDiv{margin-bottom: 15px;}
	.form-lavel{width: 80px;text-align: right;}
</style>
</head>
<body>
<input id="method" type="hidden" th:value="${method}">
	<div class="container" style="width: 100%;padding: 25px 15px;">
		<div class="row clearfix">
			<div class="col-md-12 column" style="padding: 20px;padding-top: 0px;">
				<form action="#" method="post" id="userForm" enctype="multipart/form-data" role="form" class="form-inline" style="margin-bottom: 10px;">
				<input type="hidden" name="p_id" th:value="${personnel.p_id}">
				<input type="hidden" name="employee.id" th:value="${personnel.employee.id}">
					<div id="userInfoDiv" class="form" style="padding:5px;">
						<div class="row rowDiv">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="username">账号：</label>
									<input type="text" class="form-control inputText" id="username" name="employee.username" 
										th:value="${personnel.employee.username}" placeholder="字母开头，6-21位">
									<span style="color: red;">*</span>
									<span id="usernameError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="name">姓名：</label>
									<input type="text" class="form-control inputText" id="name" name="employee.name" 
										th:value="${personnel.employee.name}" placeholder="最长11位的中文名">
									<span style="color: red;">*</span>
									<span id="nameError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
						</div>
						<div id="passwordDiv" class="row rowDiv">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="password">密码：</label>
									<input type="password" class="form-control inputText" id="password" name="employee.password" 
										th:value="${personnel.employee.password}" placeholder="数字和字母，6-21位">
									<span style="color: red;">*</span>
									<span id="passwordError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="cpassword">确认密码：</label>
									<input type="password" class="form-control inputText" id="cpassword" name="confirmPassword" 
										th:value="${personnel.employee.password}" placeholder="请确认密码">
									<span style="color: red;">*</span>
									<span id="confirmPasswordError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
						</div>
						<div class="row rowDiv">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="gender">性别：</label>
									<input type="radio" name="employee.gender" th:checked="${personnel.employee.gender == '男' }"  checked="checked" value="男"/>男&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" name="employee.gender" th:checked="${personnel.employee.gender == '女' }"  value="女"/>女&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;">*</span>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel">部门：</label>
									<select class="form-control" id="roleId" name="department.d_id">
										<option th:each="dep:${deps}"  th:selected="${personnel.department.d_id == dep.d_id}"  th:value="${dep.d_id}">[[${dep.d_name}]]</option>
									</select>
									<span style="color: red;">*</span>
								</div>
							</div>
						</div>
						<div class="row rowDiv">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="tellphone">手机号：</label>
									<input type="text" class="form-control inputText" id="tellphone" name="employee.tellphone" 
										th:value="${personnel.employee.tellphone}" placeholder="请输入真实手机号">
									<span style="color: red;">*</span>
									<span id="tellphoneError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="email">邮箱：</label>
									<input type="text" class="form-control inputText" id="email" name="employee.email" 
										th:value="${personnel.employee.email}" placeholder="请输入真实邮箱">
									<span style="color: red;">*</span>
									<span id="emailError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
						</div>
						<div class="row rowDiv">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="birthday">生日：</label>
									<input type="date" class="form-control inputText" id="birthday" name="employee.birthday" 
										th:value="${personnel.employee.birthday}" placeholder="生日,如：1997-01-12">
									<span style="color: red;">*</span>
									<span id="birthdayError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="idcard">身份证：</label>
									<input type="text" class="form-control inputText" id="idcard" name="employee.idcard" 
										th:value="${personnel.employee.idcard}" placeholder="支持15或18位">
									<span style="color: red;">*</span>
									<span id="idcardError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
						</div>
						<div class="row rowDiv">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel">所属职位：</label>
									<select class="form-control" id="roleId" name="job.j_id">
										<option th:each="job:${jobs}" th:selected="${personnel.job.j_id == job.j_id}" th:value="${job.j_id}">[[${job.j_name}]]</option>
									</select>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="pstatus">员工状态：</label>
									<select class="form-control" id="pstatus" name="pstatus">
										<option th:selected="${personnel.pstatus == '试用期' }" value="试用期">试用期</option>
										<option th:selected="${personnel.pstatus == '转正' }" value="转正">转正</option>
										<option th:selected="${personnel.pstatus == '离职' }" value="离职">离职</option>
									</select>
								</div>
							</div>
						</div>
						<div class="row rowDiv">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel" for="pentrytime">入职日期：</label>
									<input type="date" class="form-control inputText" id="pentrytime" name="pentrytime" 
										th:value="${personnel.pentrytime}" placeholder="入职日期，如：2017-01-01">
									<span style="color: red;">*</span>
									<span id="pentrytimeError" class="errorInfo" style="color: red;"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="form-lavel">头像：</label>
										<img alt="请提交图片" style="width: 50px; height: 50px" th:src="${personnel.employee.icon}">
										<input type="file" name="iconfile">
								</div>
							</div>
						</div>
							<div class="row">
								<div class="col-sm-12">
									<div class="form-group">
										<input id="submitBtn" type="button" class="btn btn-primary btn" value="提交" th:onclick="'javascript:userModify(\''+@{/personnel/modify}+'\');'" />
										<span id="systemError" class="errorInfo" style="color: red;"></span>
									</div>
								</div>
							</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/user-info.js}"></script>
<script type="text/javascript">
	$(function(){
		var method = $("#method").val();
		if (method != 'modify') {// 展示用户详情时，文本框禁止编辑
			$("#submitBtn").val("修改");
			changeRead(true);
		}
	});
	/* 为真是查看模式，不可修改；为假是修改模式，可以提交 */
	function changeRead(flag){
		var texts = $("#userInfoDiv input");
		var selects = $("#userInfoDiv select");
		if(flag){
			$("#userInfoDiv input[type='file']").hide();
		}else{
			$("#userInfoDiv input[type='file']").show();
		}
		$("#passwordDiv").prop("hidden",flag);
		$.each(texts, function(){
			$(this).prop("readonly", flag);
		});
		$.each(selects, function(){
			$(this).prop("disabled", flag);
		});
	}
</script>
</html>